<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<section class="ibox-c-main ibox-b-main" th:if="${#lists.isEmpty(dataMap['list'])}">
    <div class="noDataTipsBox noData">
        <p><span class="c-4e fs14"> 今日无直播哦~~~</span></p>
    </div>
</section>
<section class="ibox-c-main" th:if="!${#lists.isEmpty(dataMap['list'])}" th:each="material : ${dataMap['list']}">
    <div class="row">
        <div class="col-sm-12">
            <p class="fs16 c-222 ibox-t-text"><span th:text="(${material['course']}!=null)?${material['course']['courseName']}+'-':''"></span><span th:text="${material['name']}"> </span></p>
        </div>
        <div class="col-sm-12 m-b-md">
            <span class="fs18 c-green pull-left">
                <span th:text="${#strings.substring(material['liveBeginTime'],0,16)}"></span>
                -
                <span th:text="${#strings.substring(material['liveEndTime'],11,19)}"></span>
            </span>
            <span class="label label-info m-l-sm" th:if="${material['liveState']} == 1">已结束</span>
            <span class="label label-danger m-l-sm" th:if="${material['liveState']} == 2">直播中</span>
            <span class="label label-default m-l-sm" th:if="${material['liveState']} == 3">未开始</span>
        </div>

        <article class="col-sm-6 m-b-lg"  th:if="${material['isOpenClient']} or ${material['liveState']}==2 ">
            <span th:if="${material['teacher']}">
                <a href="javascript:void(0)" class="c-green materialId" th:attr="data-id=${material['id']}" th:attrappend="data-livebilling=${material['liveBilling']},data-roomid=${material['roomId']},data-ptcode=${material['studentCode']},data-roomid=${material['roomId']},data-type=${material['type']},data-sign=${material['teacher']['id']},data-name=${material['teacher']['teacherName']},data-playurl=${material['playUrl']},data-teacherCode=${material['teacherCode']},data-adminCode=${material['adminCode']}">
                    进入直播间
                    <i class="fa fa-arrow-right m-l-xs"></i>
                </a>
            </span>
        </article>
    </div>
</section>


<div  th:if="${dataMap.pages} > 0" class="text-center fs12 c-999 media-object m-t-xs ibox-b-main">
    <div class="col-sm-12" id="page-box">
        <div style="margin: 15px 0 0" class="pull-right pagination">
            <ul style="margin: 0" class="pagination pagination-outline" id="page-list-box">
                <li th:if="${dataMap.isFirstPage}==true" class="page-first disabled"><a href="javascript:void(0)">«</a></li>
                <li th:if="${dataMap.isFirstPage}==true" class="page-pre disabled"><a href="javascript:void(0)">‹</a></li>
                <li th:if="${dataMap.isFirstPage}==false" class="page-first" data-no="1"><a href="javascript:void(0)">«</a></li>
                <li th:if="${dataMap.isFirstPage}==false" class="page-pre" th:attr="data-no=${dataMap.pageNum-1}"><a href="javascript:void(0)">‹</a></li>

                <li th:each="page : ${dataMap.navigatepageNums}" class="page-number" th:attr="data-no=${page}" th:classappend="${dataMap.pageNum}==${page}?'active':''"><a href="javascript:void(0)" th:text="${page}"></a></li>
                <li th:if="${dataMap.isLastPage}==true" class="page-next disabled"><a href="javascript:void(0)">›</a></li>
                <li th:if="${dataMap.isLastPage}==true" class="page-last disabled"><a href="javascript:void(0)">»</a></li>
                <li th:if="${dataMap.isLastPage}==false" class="page-next" th:attr="data-no=${dataMap.pageNum+1}"><a href="javascript:void(0)">›</a></li>
                <li th:if="${dataMap.isLastPage}==false" class="page-last" th:attr="data-no=${dataMap.pages}"><a href="javascript:void(0)">»</a></li>
            </ul>
        </div>
    </div>
</div>
</html>